import React, { Component } from 'react';

// 创建Context对象
const UserContext = React.createContext({
    nickname: "aaaa",
    level: -1
})

class ProfileHeader extends Component {
    render() {
        //通过  this.context 获取上一级的上一级传递过来的值 
        console.log(this.context);
        // jsx -> 
        return (
            <div>
                <h2>用户昵称: {this.context.nickname}</h2>
                <h2>用户等级: {this.context.level}</h2>
            </div>
        )
    }
}

ProfileHeader.contextType = UserContext;
// ProfileHeader.contextType = ThemeContext;

function Profile(props) {
    return (
        <div>
            <ProfileHeader />
            <ul>
                <li>设置1</li>
                <li>设置2</li>
                <li>设置3</li>
                <li>设置4</li>
            </ul>
        </div>
    )
}

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            nickname: "kobe",
            level: 99
        }
    }

    render() {
// <Profile /> 组件 必须被 <UserContext.Provider /> 包裹 不然拿不到传过去的value的值，只能获取 React.createContext默认的值
        return (
            <div>
                <UserContext.Provider value={this.state}>
                    <Profile />
                </UserContext.Provider>
            </div>
        )
    }
}
